<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__RCSS__/style.css">
    <link rel="stylesheet" href="__RCSS__/smusic.css" />
    <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="__RLJS__/layer.js"></script>
    <script src="__RJS__/smusic.js"></script>
</head>
<body>
<div class="grid-demo-info">
    <h1 class="m-demo-title">XDL音乐电台</h1>

    <p>
    <form action="{:url('index/radio/index')}" method="get">
        歌曲名称：<input type="text" name="keywords" value="告白气球">搜索条数(最低10)：<input type="text" value="10" name="pagesize" >
        <input type="submit" class="testButton" value="点击搜索"/>
    </form>
    </p>
</div>

<div class="grid-music-container f-usn">
    <div class="m-music-play-wrap">
        <div class="u-cover"></div>
        <div class="m-now-info">
            <h1 class="u-music-title"><strong>标题</strong><small>歌手</small></h1>
            <div class="m-now-controls">
                <div class="u-control u-process">
                    <span class="buffer-process"></span>
                    <span class="current-process"></span>
                </div>
                <div class="u-control u-time">00:00/00:00</div>
                <div class="u-control u-volume">
                    <div class="volume-process" data-volume="0.50">
                        <span class="volume-current"></span>
                        <span class="volume-bar"></span>
                        <span class="volume-event"></span>
                    </div>
                    <a class="volume-control"></a>
                </div>
            </div>
            <div class="m-play-controls">
                <a class="u-play-btn prev" title="上一曲"></a>
                <a class="u-play-btn ctrl-play play" title="暂停"></a>
                <a class="u-play-btn next" title="下一曲"></a>
                <a id="download" download="" title="点击下载" style="font-size: 12px;" target="_blank" href="">点击下载</a>
                <a class="u-play-btn mode mode-list current" title="列表循环"></a>
                <a class="u-play-btn mode mode-random" title="随机播放"></a>
                <a class="u-play-btn mode mode-single" title="单曲循环"></a>
            </div>
        </div>
    </div>
    <div class="f-cb">&nbsp;</div>
    <div class="m-music-list-wrap"></div>
    <div class="m-music-lyric-wrap" style="width: 560px;margin-top: 316px;">
        <div class="inner">
            <ul class="js-music-lyric-content">
                <li class="eof">暂无歌词...</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        getList();
    })
    function getList() {
        var index = layer.load(1, {shade: [0.5, '#393D49']});
        var musicList= {$list};
        if(isNull(musicList)){
            new SMusic({
                musicList: musicList,
                autoPlay: true, //是否自动播放
                defaultMode: 1, //默认播放模式，随机
                callback: function(obj) { //返回当前播放歌曲信息
                    layer.close(index);
                }
            });
        }else{
            layer.close(index);
            layer.alert("没有获取到", {icon: 5});
        }

    }
    /**
     * 判断是否null
     * @param data
     */
    function isNull(data){
        return (data == "" || data == undefined || data == null) ? false: data;
    }
</script>

</body>
</html>


